@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-gallery {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000000;
	z-index: @z-index-gallery;

	&__swiper {
		width: 100%;
		height: 100%;
	}

	&__item {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	&__img {
		flex: none;
		width: 100%;
		height: 100%;
	}

	&__remark {
		position: absolute;
		bottom: 60px;
		left: 0;
		right: 0;
		color: white;
		text-align: center;
		padding: 15px;
		font-size: 14px;
		z-index: 10;
		opacity: 0;
		transition: opacity .3s ease .5s;

		&--active {
			opacity: 1;
		}
	}

	&__opr {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #0D0D0D;
		color: #FFFFFF;
		line-height: 60px;
		text-align: center;
	}

	&__del {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 18px 0;

		> image {
			width: 24px;
			height: 24px;
		}
	}

	&__icon {
		background-image: url();
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		color: #FFFFFF;
		width: 24px;
		height: 24px;
	}
}
